<template>
	<view class="container">
		<view class="title">
			<view class="title_top">银行卡信息填写</view>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">姓名</view>
					<input class="tui-input tui-text-right" placeholder="请输入您的姓名" placeholder-class="tui-phcolor" v-model="realName" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">身份证号码</view>
					<input class="tui-input tui-text-right" placeholder="请输入您的身份证号码" placeholder-class="tui-phcolor" v-model="idCard" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">发卡银行</view>
					<input class="tui-input tui-text-right" placeholder="请填写发卡银行" placeholder-class="tui-phcolor" v-model="IssuingBank" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">银行卡号</view>
					<input class="tui-input tui-text-right" placeholder="请输入银行卡号" placeholder-class="tui-phcolor" v-model="BankCardNumber" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" unlined style="border-bottom:1px solid rgba(242,242,242,1); padding-left: 0; padding-right: 0;">
				<view class="tui-flex">
					<view class="tui-input-title">开户行</view>
					<input class="tui-input tui-text-right" placeholder="请输入开户行" placeholder-class="tui-phcolor" v-model="BankOfDeposit" />
				</view>
			</tui-list-cell>

		</view>

		<view class="loginbtn" @click="loadData">
			<button>确认绑定</button>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				realName: "",
				idCard: "",
				IssuingBank: "",
				BankCardNumber: "",
				BankOfDeposit: "",
			};
		},
		onLoad() {
			
		},

		methods: {
			loadData() {
				if (this.realName == "") {
					this.tui.toast("名字不能为空");
				} else if (this.idCard == "") {
					this.tui.toast("身份证不能为空");
				} else if (this.IssuingBank == "") {
					this.tui.toast("发卡银行不能为空");
				} else if (this.BankCardNumber == "") {
					this.tui.toast("银行卡号不能为空");
				} else if (this.BankOfDeposit == "") {
					this.tui.toast("开户行不能为空");
				}
				this.tui.request('/app/qianyanBankInfo/add', 'POST', {
						realName: this.realName,
						issuingBank: this.IssuingBank,
						idCard: this.idCard,
						bankCard: this.BankCardNumber,
						depositBank: this.BankOfDeposit
					},
					false,
					false,
					false,
				).then(res => {
					console.log(res);
					if (res.errno == 801) {
						this.tui.toast(res.errmsg);
					} else {
						this.tui.toast(res.errmsg);
						uni.navigateBack({
							
						})
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	@import '../../static/css/thorui.css';

	page {
		background: #FAFAFA;
	}

	.container {
		position: relative;


		.title {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			background-color: #ffffff;

			.title_top {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}

			.title_name {
				padding-top: 15upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10px;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
			}

			.title_code {
				padding-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10px;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
			}

		}

		.main {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			margin-top: 20upx;
			background-color: #ffffff;

			.main_top {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}

			.idcode {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				padding-bottom: 30upx;

			}

			.cell-img {
				width: 160px;
				height: 120px;
			}
		}

		.bom {
			font-size: 32upx;
			color: #333333;
			padding: 0 20upx;
			margin-top: 20upx;
			background-color: #ffffff;
			padding-bottom: 20upx;

			.tit {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 10upx;
				padding-top: 20upx;
			}


			.beizhu {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(145, 145, 145, 1);
				line-height: 32upx;


				.beizhud {
					color: #E73146;
				}

			}

			.image {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;


				.image_img {
					text-align: center;

					.image_img_one {
						width: 160upx;
						height: 100upx;

					}

					.image_img_two {
						width: 50upx;
						height: 50upx;
						display: block;
						text-align: center;
						margin: 0 auto;
						margin-top: -15px;
						z-index: 10;

					}

					.tit_img {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(145, 145, 145, 1);
						line-height: 32upx;
					}

				}


			}


		}
	}

	/* 按钮 */
	.loginbtn {
		display: block;
		width: 90%;
		margin: 0 auto;
		text-align: center;
		margin-top: 280upx;
	}

	.loginbtn button {
		text-align: center;
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;

	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}
</style>
